<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片小切换</title>
    <style type="text/css">
        body{ font-size: 14px; }
        #box{ width: 400px; height: 500px; margin: 50px auto;background-color:#6c6c6c;border: 2px #1f1a1a solid;
        background:url(1.png);background-size:cover;}
        ul{ margin: 0; padding: 0;
        position:absolute; width: 40px;height: auto; top:60px;left:890px;}
        li{list-style: none;width: 40px; height: 40px;  margin-bottom: 20px; cursor: pointer;}
        #box p{ height: 30px; background: #000; text-align: center;
    font-weight: bold; color: #fff; line-height: 30px;}
        p#num{ margin-top: 0px;}
        p#text{margin-top: 440px;}
		li img{width:40px; height:40px;}
       .li-style{ background: url( x1.png); background-size: cover;
        opacity: 0.4;filter: alpha(40);}
    </style>
    <script type="text/javascript">
    window.onload=function(){
     	//思路：1）获取元素，将图片及说明文字存入不同数组，方便后续获取及利用；2）在无序列表中写入插入内容；3）设置插入图片的事件      （box及li中的第一张图片是css插入的，但是li的是用JS写入，一开始并没有）(box中的图片是背景图)
     	var oBox=document.getElementById("box");
     	var oNum=document.getElementById("num");
     	var oText=document.getElementById("text");
     	var oList=document.getElementById("list");
     	var arrImg1=["1.png","2.png","3.png","4.png"];
     	var arrImg2=["x1.png","x2.png","x3.png","x4.png"];
     	var arrText=["图片一","图片二","图片三","图片四"];
        //在ul中写入li同时在li中写入图片
     	for(var i=0;i<arrImg1.length;i++){
            oList.innerHTML+="<li><img src='"+arrImg2[i]+"' /></li>";
        }
        //获取li
        var oLi=document.getElementsByTagName("li");
       // alert(oLi.length);弹出成功

        //初始化 设置box中的内容
       var num=0;
        oNum.innerHTML=(num+1)+"/"+arrImg1.length;
        oText.innerHTML=arrText[num];
        //给li中的图片添加事件   先用for循环遍历每个li，再添加事件
        for(var k=0;k<oLi.length;k++){
            //给每个li添加索引值
            oLi[k].index=k;//   前边没有var  切记，这里不是声明变量，是赋值
            //每个li的事件
            oLi[k].onmouseover=function(){
                oBox.style.background="url("+arrImg1[this.index]+") no-repeat center";
                oNum.innerHTML=(this.index+1)+"/"+arrImg1.length;
                oText.innerHTML=arrText[this.index];

            }         
        }
		/*for(var i=0;i<oLi.length;i++){    //为什么我的第一张图初始状态能填满box，
			oLi[i].index=i;					//划过之后就不能填满，改成单击事件之后就可以填满
			oLi[i].onclick=function(){
				oNum.innerHTML=(this.index+1)+"/"+arrImg1.length;
				oBox.style.background="url('"+arrImg1[this.index]+"')";
				oText.innerHTML=arrText[this.index];
			}
	  }*/
		
	  
    }
    </script>
</head>
<body>
    <div id="box">
     <p id="num">图片数量正在加载……</p>
     <p id="text">图片说明正在加载……</p>
    </div>
    <ul id="list">
        
    </ul>  
</body>
</html>
